import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"
import "https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js" //引入lazyload插件
import "https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js";
class Indexhead {
    constructor() {
        this.arr = ['空调', '冰箱', '洗衣机', '热水器', '生活家电', '手机数码', '家庭中央空调', '商用中央空调', '冷冻冷藏', '常用配件', '智能家居', '家电服务'];
        this.logined();
        this.secondmenu();
        this.cartbtn();
        this.search();
    }

    //登录状态
    logined() {
        if (localStorage.getItem('user')) {
            $('.no_login').hide();
            $('.logined').show();
            $('.logined a').eq(0).html(localStorage.getItem('user'));
        }
        $('.exit').on('click', () => { //退出后删除本地存储
            $('.no_login').show();
            $('.logined').hide();
            localStorage.removeItem('user');
        })
    }

    secondmenu() {
        this.str = '';
        //渲染二级列表
        $.each(this.arr, (index, value) => {
            this.str += `<li>
                            <span style = "background:url(img/CategoryIcon-${index+1}.png) no-repeat 6px center;background-size: 20px"></span>
                            <a href="list.html">${value}</a>
                            <strong>&gt;</strong>
                        </li>`;
        })
        $('.menu ul').html(this.str);

        //移入全部商品分类显示二级菜单
        $('nav h3').hover(function() {
                $('.menu ul').show();
            }, function() {
                $('.menu ul').hide();
            })
            //移出全部商品分类移入二级菜单保证二级菜单不消失
        $('.menu ul').hover(function() {
            $('.menu ul').show();
        }, function() {
            $('.menu ul').hide();
        })

        //二级菜单进行Tab切换
        $('.menu li').hover(function() {
                $('.cartlist').show();
                $(this).addClass('active').siblings('li').removeClass('active');
                $('.item').eq($(this).index()).show().siblings('.item').hide();
                if ($(window).scrollTop() > $('.menu').offset().top) {
                    $('.cartlist').css({
                        top: $(window).scrollTop() - $('.menu').offset().top
                    })
                } else {
                    $('.cartlist').css({
                        top: 0
                    })
                }
            }, function() {
                $('.cartlist').hide();
                $(this).removeClass('active').addClass('index').siblings('li').removeClass('index'); //移出li元素时需要将active类名移除，但在移出前的li元素上添加一个方便后续寻找索引的类名
            })
            //移出二级菜单进入三级菜单
        $('.cartlist').hover(function() {
            $('.cartlist').show();
            $('.menu ul').show();
            $('.menu li').eq($('.index').index()).addClass('active'); //移入三级菜单时当前的需要保持进入时的li的移入样式。
        }, function() {
            $('.cartlist').hide();
            $('.menu ul').hide();
            $('.menu li').eq($('.index').index()).removeClass('active'); //移出后删除类名
        })
    }



    search() {
        let that = this;
        $('.search input').on('input', function() {
            $('.search-list').show();
            if ($('.lastscript')[0]) {
                $('.lastscript').remove();
            }
            that.script = document.createElement('script');
            $(that.script).addClass('lastscript');
            $('body').append(that.script);
            $(that.script).attr('src', `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$(this).val()}&sid=1421_21114_26350_20930&req=2&cb=getdata`);
        })

        $('.search input').on('blur', function() { //失去焦点后隐藏列表
            setTimeout(() => { //延时给点击li的时间
                $('.search-list').hide();
            }, 100);
        })

        $('.search-list').on('click', 'li', function() { //点击li将内容传给input
            $('.search input').val($(this).find('a').html());
            $('.search-list').hide();
        })

    }

    // 购物车按钮
    cartbtn() {
        let that = this;
        if ($.cookie('productId') && $.cookie('productNum')) {
            this.numArr = $.cookie('productNum').split(',');
            this.goodsNum = 0;
            $.each(this.numArr, function(index, value) {
                that.goodsNum += parseInt(value);
            })
            $('.num').html(`(${that.goodsNum})`)
        } else {
            $('.num').html(`(0)`)
        }
    }

}




//幻灯片
class Banner {
    constructor() {
        this.banner();
    }

    banner() {
        this.num = null;
        this.timer = null;
        let that = this;

        //设置ul的宽度
        $('.banner ul').css({
            width: `${$('.banner ul li').length*100}%`
        });

        //设置每个li的宽度与$('.banner')一致
        $('.banner ul li').css({
            width: `${100/$('.banner ul li').length}%`
        })

        //给下面的小按钮添加点击事件
        $('.dot').on('click', function() {
            that.num = $(this).index();
            that.move();
        })


        this.timer = setInterval(function() {
            that.num++;
            that.move();
        }, 3000)



        $('.banner').hover(function() {
            clearInterval(that.timer);
        }, function() {
            that.timer = setInterval(function() {
                that.num++;
                that.move();
            }, 3000)
        })
    }
    move() { //控制ul的移动和小按钮的状态
        if (this.num > $('.dot').length) { //判断索引是否超过了最后一张图片的位置
            this.num = 1;
            $('.banner ul').css({
                left: 0
            })
        }
        if (this.num === $('.dot').length) { //
            $('.dot').eq(0).addClass('dot-active').siblings('li').removeClass('dot-active');
        } else {
            $('.dot').eq(this.num).addClass('dot-active').siblings('li').removeClass('dot-active');
        }
        $('.banner ul').stop(true).animate({
            left: -this.num * $('.banner ul li').outerWidth()
        }, 300)
    }
}

class Indexmain {
    constructor() {
        this.render();
        this.tabCut();
        this.stairs();
        this.topFloat();
    }

    //主页渲染
    render() {
        let that = this;
        $.ajax({
            url: 'http://10.31.163.57/gree/php/indexrender.php',
            dataType: 'json',
        }).done(function(arr) {
            let str = '';
            that.num = 0;
            $('.floor-right ul').each(function(index, ele) {
                str = '';
                $.each(arr, function(index, value) {
                    if (index >= that.num && index < that.num + 6) { //每6条渲染一个列表
                        str += `<li class="item">
                               <a href="#">
                                  <img data-original="${value.url}" alt="" class="lazy" width="200" height="200">
                                  <p class="title">${value.title}</ p>
                                  <p class="trait">${value.trait}</p>
                                  <p class="price">￥${value.price}</p>
                               </a>
                            </li>`;
                    }
                })
                that.num += 6;
                $(ele).html(str);
            })
            $(function() { //相当于原生js的window.onload - 页面加载完成
                $("img.lazy").lazyload({
                    effect: "fadeIn" //淡入的效果
                });
            });

            $('.floor-right ul .item').hover(function() {
                $(this).addClass('list-active').siblings('li').removeClass('list-active');
            }, function() {
                $(this).removeClass('list-active');
            })
        })
    }

    //tab切换
    tabCut() {
        // $('.floor-nav ul li').hover(function() { //因$(this).index()只能为0和1。故该方法不可行
        //         console.log($(this).index());
        //         $(this).addClass('li-active').siblings('li').removeClass('li-active');
        //         $('.floor-right').eq($(this).index('li')).addClass('floor-active').siblings('.floor-right').removeClass('floor-active');
        //     }, function() {
        //         $(this).removeClass('li-active');
        //     })
        $('.floor-nav ul li').each(function(index, ele) {
            $(ele).hover(function() {
                $(this).addClass('li-active').siblings('li').removeClass('li-active');
                $('.floor-right').eq(index).addClass('floor-active').siblings('.floor-right').removeClass('floor-active');
            }, function() {
                $(this).removeClass('li-active');
            })
        })
    }

    //楼梯效果
    stairs() {
        $('.stairs ul li').not('.last-li').on('click', function() {
            $(this).find('.floor_h').addClass('spanactive').siblings('span').removeClass('spanactive'); //让当前点击的li显示文字
            $('html').stop(true).animate({
                scrollTop: $('.floor-nav').eq($(this).index()).offset().top - 100
            }, 200)
        })

        $('.last-li').on('click', function() {
            $(this).siblings('li').find('.floor_s').addClass('spanactive').siblings('span').removeClass('spanactive'); //让回到顶部之外的楼层显示
            $('html').stop(true).animate({
                scrollTop: 0
            }, 200)
        })
        this.scroll();
        $(window).on('scroll', () => {
            this.scroll();
        })
    }

    //
    scroll() {
        let that = this;
        if ($(window).scrollTop() >= 1200 && $(window).scrollTop() <= $('.video').offset().top - 300) { //控制楼梯显示隐藏
            $('.stairs').show();
        } else {
            $('.stairs').hide();
        }
        $('.floor-nav').not('.last-li').each(function(index, ele) {
            that.floortop = $(ele).offset().top; //当前楼层的top值
            if (that.floortop > $(window).scrollTop()) { //当前楼层的top小于滚动条的top值时，循环才会到下一楼层。
                $('.stairs ul li').eq(index).find('.floor_h').addClass('spanactive').siblings('span').removeClass('spanactive');
                $('.stairs ul li').eq(index).siblings('li').find('.floor_s').addClass('spanactive').siblings('span').removeClass('spanactive');
                return false;
            }
        })
    }


    //顶部悬浮
    topFloat() {
        $(window).on('scroll', () => {
            if ($(window).scrollTop() > 200) {
                $('header').css({
                    position: 'fixed',
                    left: '50%' - $('header').outerWidth / 2,
                    top: 0
                })
            } else {
                $('header').css({
                    position: 'static'
                })
            }
        })
    }
}
export {
    Indexhead,
    Banner,
    Indexmain,
}